<template>
  <div class="container flex flex-column flex-nowrap">
    <div class="operate">
      <el-button type="primary" @click="handlePost">发布文章</el-button>
      <!-- 发布文章对话框 -->
      <el-dialog
          title="发布文章"
          :visible.sync="dialogVisible"
          width="600px"
          :show-close="false"
      >
        <el-input maxlength="30"
                  show-word-limit v-model="dialogData.title" placeholder="请输入文章标题"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleDialogClose">取 消</el-button>
          <el-button type="primary" @click="postArticle">发 布</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 富文本编辑器 -->
    <mavon-editor ref="md" @imgAdd="imgAdd" v-model="value" :toolbars="toolbars" class="edit"/>
  </div>
</template>

<script>
export default {
  name: "ArticlePost",
  data() {
    return {
      value: '',
      dialogVisible: false,
      dialogData: {
        title: ''
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  methods: {
    handleDialogClose() {
      this.dialogData.title = ''
      this.dialogVisible = false
    },
    async postArticle() {
      let {title} = this.dialogData;
      if (title) {
        this.$store.dispatch('article/postNewArticle', {
          title, detail: this.value,society_id:this.$store.getters.society_id
        }).then(()=>{
          this.$message.success('发布成功')
          this.handleDialogClose()
        })
      } else {
        this.$message.info('请输入文章标题')
      }
    },
    handlePost(){
      if (this.value){
        this.dialogVisible = true
      }else {
        this.$message.info('文章还没有输入任何内容')
      }
    },
    // 上传图片
    imgAdd(pos, $file){
      // 将图片上传到服务器.
      let formdata = new FormData();
      formdata.append('img', $file);
      this.$store.dispatch('article/uploadImage',formdata).then(url=>{
        // 替换url到原本文本位置
        this.$refs.md.$img2Url(pos,url)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 30px;
  height: calc(100vh - 50px);

  .operate {

  }

  .edit {
    margin: 20px 0;
    height: 100%;
    max-width: 1440px;
    min-width: 900px;
    transition: all .28s;
  }
}
</style>